BAB 03 
Tip & Trik Slider 


Pada pembahasan selanjutnya, kita akan bermain-main dengan fitur 
template yang dijual oleh WP Asia. Sekilas mengenai WP Asia adalah 
One-Stop-Shop & Learning Center For WebMaster, yang saya dirikan 


untuk para WordPress Lover dan juga untuk pelaku bisnis online. 


WP Asia menyediakan theme WordPress (yang akan kita pelajari fitur- 
fiturnya di dalam buku ini, dan bagi para pembaca buku ini juga akan 
mendapatkan bonus Theme dari WP Asia), Plugin WordPress, Script 
Bisnis Online, dan Tool-Tool penunjang lainnya. Tidak hanya sampai di 
situ, WP Asia juga menyediakan tutorial, baik itu dalam bentuk e-book 


dan video, semua tutorial disusun sendiri oleh saya. 


Vga, 5St 


nge-Stop-Shop 5 Learn 


g 
^ For Webi: 


Di Jamin ! 
Setiap bulan akan ada penambahan 


Plugin WondPress 
atau 


Onime tan Too Tool Lainya 


http://www.wordpress-theme.asia - One-Stop-Shop & Learning Center 
For WebMaster 
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WP Asia menyediakan sistem keanggotaan seumur hidup, yang artinya 
seorang member premium dapat men-download WordPress Theme, 
Plugin WordPress, Script Bisnis Online, dan Tool Penunjang selamanya. 
Dijamin setiap bulannya akan selalu ada penambahan theme atau plugin 


atau script atau tool baru untuk memanjakan para member premium. 


Nah, bagi Anda pengguna WordPress, dengan menggunakan WP Asia, 
Anda dapat menghasilkan website dengan tampilan profesional. Bagi 
webmaster, akan dapat mempersingkat waktu pendesainan. Dengan 
fitur-fitur modern yang disediakan oleh WP Asia, Anda akan dapat 


menjual website hasil buatan sendiri dengan harga tinggi. 


Harapan saya selaku Founder dari WP Asia, website kelak akan menjadi 
learning center bagi webmaster untuk dapat meningkatkan skill dalam 
mengembangkan sebuah website, dan juga bagi pelaku bisnis online 


untuk dapat meraih keuntungan yang sebesar-besarnya. 


Bagi pembaca buku ini, berhak mendapatkan discount sebesar 3596 
untuk dapat mengakses sebagai member premium. Saat buku ini ditulis, 
biaya untuk menjadi member premium adalah Rp. 200.000. Namun bagi 
pembaca buku ini, discount 3596 tetap berlaku selamanya. Silakan Anda 
melakukan pendaftaran terlebih dahulu di WP Asia, kemudian hubungi 
sales WP Asia melalui email info@ wordpress-theme.asia dengan 
mencantumkan subjek email: klaim discount 35X. Maka sales WP Asia 
akan memberikan informasi jumlah total yang harus Anda transfer 
(tentu setelah discount 35X dari harga yang sedang berlaku di WP Asia). 
Setelah Anda melakukan pembayaran, status keanggotaan Anda akan di- 
upgrade menjadi member premium, dan Anda berhak mendapatkan 
semua kemewahan yang diberikan oleh WP Asia untuk para member 


premium. 
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O ya, bagi Anda yang ingin membuat website penghasil uang dengan 
modal terjangkau, saya sudah menyusun buku Jurus Sakti Membuat 
Website Penghasil Uang dan Step By Step Mendapat Uang via Website 


Periklanan. 


Di dalam kedua buku itu, saya memberikan tip cara membangun website 
penghasil uang, yaitu Website PTC (Pay To Click), Website Click 
Exchange, Website PPC (Pay Per Click), Website Traffic Exchange dan 
Website Penyingkat URL Premium (mirip adf.ly). Silakan miliki kedua 
buku tersebut karena selain pengetahuan yang berharga, di dalam buku 
tersebut juga diberikan Bonus CD yang berisi script-script yang digu- 
nakan di dalam pembahasan, dan juga bonus tambahan script yang bisa 


Anda gunakan untuk membangun website penghasil uang. 


Kembali ke pembahasan WordPress, yaitu kita akan mengupas satu per 
satu fitur-fitur yang ada pada theme WP Asia, di mana fitur-fitur 


tersebut dapat menyulap sebuah website menjadi lebih profesional lagi. 


Sebelumnya Anda harus menginstal theme terlebih dahulu, di dalam 
Bonus CD sudah saya sediakan beberapa theme yang bisa Anda gunakan. 
Untuk menyamakan pembahasan, kita akan menggunakan theme yang 


sama, yaitu theme Kemang. 


Catatan: Untuk memudahkan Anda dalam memahami semua tutorial 
yang diberikan di buku ini, sebaiknya Anda sudah membaca buku Killer 
WordPress. Buku tersebut berisi pembahasan dasar mengenai Word- 
Press yang akan memudahkan pemahaman Anda, khususnya yang masih 


pemula. 
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3.1 Cara Instalasi Theme 


Setelah menginstal WordPress di dalam localhost, selanjutnya copy 


theme Kemang yang ada dalam Bonus CD. Theme tersebut berada di 
dalam folder kemang. 


"- Ciputat m kebayoran 
"" kemayoran id senayan land sunter 


su ha RE Aa pum 
NUS T mE at PP S NT TR a ^ 


f 

i 

t 

« 
Meng-copy Folder Theme Kemang 


# Paste ke dalam folder wp-contentithemes di dalam WordPress 
yang ada di localhost. 


> : EZ ndx —^ 
twentythirteen twentytwelve PHP Scrip * 
| | (IP 1x8 
fame kemang 


d 
4 
anden MN MEP. annn a: 2E O aa satt, : Wa 


Berhasil Mem-paste Folder Theme Kemang 
ke dalam WordPress di Localhost 


f Selanjutnya masuk ke dalam administrator WordPress. 


Eo Appearance 
ft Masuk ke menu ~ 


ft- Kemudian klik link. ' 


(2 Comments 


^ 
am Appearance Mo er 
i 


Cus 


f$ Plugins La r 

Vidgets eme conj 

5 Users Menus r 
T Tools Header ^ 

z Editor "d 
RUE raent NOW t 


reca ads Y natn 


Mulai Menginstal Theme 
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Zł Masuk ke kolom Available Themes, Anda akan melihat theme 


dari WP Asia. 


Available Themes 


vo ASI 


www.wordpres 


Twenty Twelve 


A AAA Aa 


Kemang 
By WP Asia By the WordPress team 
tivat ive Previ Details Delete tivate | Live Previ Details Delet 
mc P ap endo e, urs aem umm O uU 


Theme WP Asia Sudah Terinstal di dalam Sistem 


r# Selanjutnya adalah mengaktifkan theme tersebut. 


Activate 


FF Klik link 


rt Dan theme sudah aktif dan siap digunakan. 


Em Manage Themes 5 


New theme activated. Visit site 


eri 


Theme Sudah Aktif 


FF Silakan lihat hasilnya pada website. 
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Solusi Tepat B 


Tampilan Website dengan Theme Kemang WP Asia 


Keterangan: Silakan gunakan cara yang serupa untuk melakukan 


instalasi theme, jangan lupa untuk mengaktifkan theme. 


3.2 Menggunakan Slider Feature Post 


WP Asia memberikan banyak fitur slider yang mengalami pembaruan 
dari waktu ke waktunya. Theme kemang ini adalah theme generasi awal, 
silakan Anda upgrade keanggotaan Anda menjadi member premium di 
WP Asia untuk mendapatkan theme-theme terbaru dengan fitur yang 


ter-update untuk kebutuhan website modern. 


/* Klik menu & WP Asia 


WP Asia 


#& Kemudian klik link 


s" Services 


sg” Testimonials 


rd 
& WP Asia WP f^ rd 
Er] Appearance Seti Local Saving J 
f$ Plugins $ 
EUM, RN TU P 


Masuk ke dalam Panel Penyetingan Theme 
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Anda akan melihat fitur-fitur penyetingan untuk menghasilkan website 
sesuai dengan kebutuhan Anda. Kita akan membahas fitur-fitur penting 


satu per satu, sekarang kita mulai dari fitur Slider terlebih dahulu. 


Ld 
$ 


Active Or Download Slidershock Plugin And Enjoy Exclusive And Preconfigured sia 


Slider 


CHA Vertical Slide Slider 
us No Slider 
Effects slider 
Accordion Slider 
3D slider 
Featured post slider. 
Fading Transition Slider 


Select the sl 


Uploader images 


Horizontal 
MERAH Vertical Blind Slider 
MXENREROM Fan Slice Slider 
- 


izontal Slide Slider 
M x 


Fitur untuk Penyetingan Slider 
#ł Pada kolom Slider type, silakan Anda pilih tipe 


Featured post slider 
, di mana nantinya slider akan tampil 


berdasarkan isi postingan. 


Save Changes 
t Jika sudah, tekan tombol | Save cnanges | 


Ft Silakan Anda lihat hasilnya pada halaman website, Anda tidak 
melihat apa-apa terkecuali tampilan warna gelap pada slider. 
Hal tersebut karena Anda belum melakukan penyetingan pada 


postingan. 


Tampilan Slider yang Masih Kosong 
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fF Silakan buat postingan baru. 


Aenean Luctus Lectus Ut Tortor Malesuada 
Permalink: http/localhostwp-asia/?p-11 | Change Permalinks || View Post 


(Bh Add Media Visual | T 


(3 
E 
È 

| 

I 
R 
Im 
[T] 
DL] 
J 


Phasellus fringilla vehicula egestas. Class aptent taciti sociosqu ad litora 
torquent per conubia nostra, per inceptos himenaeos. Nam gravida porta 
tellus sit amet commodo. 


Male Chefin The RestaurantPhasellus fringilla 
vehicula egestas. Class aptent taciti sociosqu 
ad litora torquent per conubia nostra, per 
inceptos himenaeos. Nam gravida porta tellus 
sit amet commodo. Vivamus eget ligula lacus. 
In mi tellus, elementum quis vulputate in, 


$ yariygetæss Praesent taat aum gr 


NE YR Ag O7 


Mengisi Postingan 


#t Jangan lupa pada featured image, isi juga dengan gambar. 


Featured Image f 


Remove featured image 
E CAP AN AP 2 MEy 


Mengisi Featured Image 


#F Gambar pada Featured Image inilah yang akan tampil pada 


slider. 


:[v 
#b Beri tanda centang pada Featured Post 


More post options Á 


Featured Post: [v] f 
Vat S ad aa 


p 


Menyeting Menjadi Featured Post 


£t Penyetingan featured post ini bertujuan untuk memilih 
postingan yang ingin ditampilkan pada slider. Silakan beri tanda 
centang jika Anda menginginkan postingan tersebut tampil pada 


slider. 


#k Kemudian simpan dan lihat hasilnya pada website. 


YOUR Bram” 


Contact | Gallery | Home || Portfolio. 


Aenean Luctus Lectus Ut Tortor 


Malesuada 


Hasil Slider pada Halaman Website 


#k Silakan mengulanginya untuk menambahkan slider dengan 
postingan lainnya. Selanjutnya silakan kembali ke penyetingan 
panel theme, kita akan melakukan sedikit trik agar slider dapat 


tampil lebih menarik. 
Ft Masuk ke kolom Captions Fields, Anda akan melihat beberapa 


pilihan penyetingan. 


Captions Fields: Date... Deret | - Author , 


* 


Thumbs Position: left 


right top bottom P 
uno oils. al I atm ho amm Mn a a NEN S f 


Penyetingan Captions Fields 


f Silakan Anda klik tombol tersebut sesuai dengan kebutuhan, di 


sini saya akan menggunakan fitur Teks. 
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Delay in miliseconds 


Captions Fields: Date BENE sano E 
A 


Thumbs Position: | none | left right top bottom 
ftem ac ba ii tataran I AP A LE 


Penambah Fitur Teks 


Ft Simpan hasil pekerjaan dan lihat hasilnya pada halaman 


website. 


YOUR Tramo" 


Aenean Luctus Lectus Ut Tortor 
Malesuada 


Slider Menghasilkan Isi Teks 


# Bagaimana? Asyik bukan? Anda juga bisa mengubah Thumbs 


Position sesuai dengan kebutuhan desain, silakan dicoba. 


#k Selanjutnya Anda juga bisa mengubah jenis frame slider. Masuk 
ke kolom Slider Style, selanjutnya silakan pilih frame slider 


sesuai dengan kebutuhan desain. 


Slider Style: 44 


3 
+ 
£ 


This slider will take data directly from the posts, please go to each posts edit page and check the "Feature, 


DR ad Lp v 


NR F UA 


Mengubah Frame Slider 


# Silakan simpan hasil pekerjaan dan lihat hasilnya pada halaman 


website. 


Aenean Luctus Lectus Uf Tortor 
Malesuada 


Berhasil Memgubah Frame Slider 


3.3 Menggunakan Slider 3D Hingga Horizontal 
Slider 


Kita masih akan bermain-main dengan slider. Banyak fitur slider yang 
tersedia, yang dapat Anda gunakan untuk memberikan nuansa tersendiri 


pada website buatan Anda. 


#k Pada kolom Slider type, silakan ubah tipe slider sesuai dengan 


keinginan Anda. 
#t Anda juga bisa mengubah Thumbs Position. 


Kt Sesuaikan Slider Style agar frame slider pas dengan desain 


website. 


#b Simpan dan lihat hasilnya pada website. 
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Slider 1 
Active Or Download Slidershock Plugin And Enjoy Exclusive And Preconfigured Sliders rod 
guiar ime Fading Transition Slider 


Select the slider you want to use on yoursite 


Delay in miliseconds 


Do Responsive no 


Slider Width: 900 
Slider Height: 366 
Thumbs Position left right top bottom 
Slider Style 12 


oue, NAAM 


aan, MP AMAL T Mn, ar^ BS samaan emo 


Menyeting Slider Sesuai Kebutuhan 


3.3.1 Meng-upload Gambar untuk Slider dan Mengatur Posisi 
Slider 

Sebelum Anda meng-upload sebuah gambar untuk dijadikan slider, 

pastikan sebelumnya ukuran gambar tersebut sudah pas dengan porsi 

desain. Sehingga tidak akan merusak tata letak dan desain website 

secara keseluruhan. Kurang lebih ukuran gambar untuk slider adalah 

W: 900 dan H: 350. 


Ft Pada kolom Uploader images, klik tombol 


Upload a slider file 


perm] * 
4 
Uploader images P 
Upload a slider file { 
IE nessun. » AS 
"i C e M inu LT an AN 


Meng-upload Gambar untuk Slider 
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Dan gambar akan ter-upload, Anda akan melihat penambahan 


gambar baru pada posisi paling bawah. 


Selanjutnya adalah mengatur posisi gambar slider untuk 
ditampilkan terlebih dahulu. Silakan klik tombol E atau 


Lj] untuk mengatur posisi gambar. Gambar yang paling atas 
akan ditampilkan terlebih dahulu. 


Untuk menghapusnya, cukup klik tombol 


Jika sudah, jangan lupa untuk menyimpan hasil pekerjaan Anda. 
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